<template>
  <!--维保管理--维保记录--详情-->
  <div class="page-operate">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="page-head">
      <span class="operate-text">{{title}}</span>
      <div class="operate-box">
        <button @click="back()">关闭</button>
      </div>
    </div>
    <div class="content-area ">
      <div class="warn-detail form-detail maintain-check">
        <div class="tab-title">
          <ul>
            <li v-for="(item,index) in tabList" :class="{choose:choosed==index}" @click="change(item.value)">
              {{item.title}}
            </li>
          </ul>
        </div>
        <div class="tab-content">
          <div class="content1 detail-content" v-show="choosed==0">
            <table border="1" bordercolor='#EEE'>
              <tr>
                <td>安装地址</td>
                <td>{{pageData.elAddress}}</td>
                <td>电梯注册代码</td>
                <td>{{pageData.elCode}}</td>
              </tr>
              <tr>
                <td>电梯品牌</td>
                <td>{{pageData.elBrand}}</td>
                <td>电梯型号</td>
                <td>{{pageData.elModel}}</td>
              </tr>
              <tr>
                <td>使用单位</td>
                <td>{{pageData.useDepName}}</td>
                <td>维保单位</td>
                <td>{{pageData.depName}}</td>
              </tr>
              <tr>
                <td>使用单位责任人</td>
                <td>{{pageData.useDepUserName}}</td>
                <td>使用单位责任人电话</td>
                <td>{{pageData.useDepPhone}}</td>
              </tr>
              <tr>
                <td>维保单位责任人</td>
                <td>{{pageData.maintainDepUserName}}</td>
                <td>维保单位责任人电话</td>
                <td>{{pageData.maintainDepPhone}}</td>
              </tr>
              <tr>
                <td>生成时间</td>
                <td>{{pageData.createDate}}</td>
                <td>应完成时间</td>
                <td>{{pageData.planDate}}</td>
              </tr>
              <tr>
                <td>状态</td>
                <td>{{pageData.statusName}}</td>
                <td></td>
                <td></td>
              </tr>
            </table>
          </div>
          <div class="content2" v-show="choosed==1">
            <div class="item-box">
              <div class="item">
                <div class="item-icon"></div>
                <div class="item-text">
                  <div class="strong" v-show="pageData.createDate!==null"><b>生成时间:</b>&nbsp;<span>{{pageData.createDate}}</span>
                  </div>
                  <div class="strong" v-show="pageData.endDate!==null">
                    <b>完成时间:</b>&nbsp;<span>{{pageData.endDate}}</span>
                  </div>
                </div>
              </div>
              <div class="item" v-for="(item, index) in pageData.logList">
                <div class="item-icon"></div>
                <div class="item-text">
                  <span class="deal-line"><b>状态: </b> {{item.brief}}</span><br>
                  <span class="deal-line"><b>操作员: </b> {{item.opUserName}}</span><br>
                  <span class="deal-line"><b>所属单位: </b> {{item.opUserDepName}}</span><br>
                  <span class="deal-line"><b>{{ index == 1 ? '签到时间' : '处理时间'}}: </b> {{item.createDate}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" type="text/scss">
  @import '../../../../style/entry/components/tabDetail';
  @import '../../../../style/entry/components/pageChildCommon';
</style>
<script>
  import com from '../../../../js/common'
  import moment from 'moment'  // 时间格式转化
  import HeadTop from "../../../../components/head-top/head-top"
  import {getMaintainQuery} from '@/api/getData'

  export default {
    name: 'maintainCheck',
    components: {
      HeadTop
    },
    data() {
      return {
        tabList: [
          {
            title: '检验信息',
            value: 0
          },
          {
            title: '工单追踪',
            value: 1
          },
        ],
        choosed: 0,
        isShow: true,
        checkShow: false,
        maintainId: '',
        remark: '',
        statusArr: [{
          value: '1',
          label: '待签到'
        }, {
          value: '2',
          label: '待完成'
        }, {
          value: '3',
          label: '待物业确认'
        }, {
          value: '4',
          label: '维保完成'
        }],
        title: '查看详情',
        pageData: {
          elAddress: '',
          elCode: '',
          elBrand: '',
          useDepName: '',
          rescueCode: '',
          userDepCode: '',
          depName: '',
          elModel: '',
          maintainDepUserName: '',
          maintainDepPhone: '',
          useDepUserName: '',
          useDepPhone: '',
          createDate: '',
          status: '',
          endDate: '',
          planDate: '',
          confirmDate: '',
          logList: [],
        },
      }
    },
    // 获取数据页面数据
    mounted() {
      let id = this.$route.query.id;
      this.maintainId = this.$route.query.id;
      this.getMaintainDetail(id);
    },
    methods: {
      // 获取页面所需数据
      getMaintainDetail(res) {
        getMaintainQuery({id: res}).then((data) => {
          let info = data.data.data;
          info.endDate = this.dateFormat(info.endDate);
          info.planDate = this.dateFormat(info.planDate, 'YYYY-MM-DD');
          info.createDate = this.dateFormat(info.createDate);
          for (let i of info.logList) {
            i.createDate = this.dateFormat(i.createDate)
          }
          this.pageData.logList = info.logList;
          this.pageData = info;
        }).catch((err) => {
          this.$message.warning({
            message: '查询失败' + err.data.message,
            duration: 1500,
          })
        })
      },

      // 日期转换
      dateFormat(res, format) {
        format = format ? format : 'YYYY-MM-DD hh:mm:ss';
        if (res) res = moment(res).format(format);
        return res;
      },

      // tab切换
      change(val) {
        if (this.choosed != val) this.isShow = !this.isShow
        this.choosed = val
      },

      // 返回上一级
      back() {
        this.$router.go(-1);
        // 导航栏同时信息返回上级
      },

    }
  }
</script>
